<template>
  <div :class="option.className" style="width: 100%; height: 100%">
    <a-image :src="option.src" width="100%" fit="cover" />
  </div>
</template>
<script setup>
const attrs = useAttrs()
const option = attrs.option
const { dimension, measure } = attrs.data
let dataset = {
  dimensions: [],
  source: []
}
const text = ref("")
const init = () => {
  const settings = g.Copy(option)
  let str = settings.text
  dataset.dimensions.forEach((item) => {
    let source = item.type === "M" ? 0 : ""
    try {
      source = dataset.source[item]
    } catch (e) {
      /* empty */
    }
    str = g.replaceAll(str, `@${item}@`, source || 0)
  })
  text.value = str
}
init()
watch([option], () => {
  init()
})
// 对外暴露的方法，接收外部传入的数据
const update = (data) => {
  dataset = {
    dimensions: [...dimension.map((i) => i.title), ...measure.map((i) => i.title)],
    source: data.data[0]
  }
  init()
}
defineExpose({
  update
})
</script>
<style scoped lang="less"></style>
